<template>
  <list-layout
    :hideCrumbs="true"
    channel="committee">
    <div class="row q-pt-xl q-pr-lg">
      <div v-html="data.description" class="col"></div>
      <div class="form-wrapper">
        <div class="title">
          成员单位查询
        </div>
        <q-form ref="form" @submit="onSubmit" @reset="onReset" class="q-px-lg">
          <q-input
            outlined
            v-model="companyName"
            :placeholder="$t('请输入单位全称')"
            :rules="[(val) => !!val || $t('请输入单位全称')]"
            dense
          >
            <!-- <template v-slot:after>
              <div class="q-pb-sm">
                <q-icon v-if="checkResult === true" name="fas fa-check" color="green"></q-icon>
                <q-icon v-if="checkResult === false" name="fas fa-times" color="red"></q-icon>
              </div>
            </template> -->
          </q-input>

          <q-input
            outlined
            v-model="captcha"
            :placeholder="$t('图形验证码')"
            :rules="[(val) => !!val || $t('请输入图形验证码')]"
            dense
          >
            <template v-slot:after>
              <captcha ref="captcha" class="captcha" @change="changeCaptcha"></captcha>
            </template>
          </q-input>

          <div class="row justify-center q-px-xl">
            <q-btn
              flat
              class="col cancel bg-grey text-white"
              :label="$t('重置')"
              type="reset"
              rounded
            />

            <q-btn
              flat
              class="col check bg-primary text-white q-ml-xl"
              :label="$t('查询')"
              type="submit"
              rounded
            />
          </div>
        </q-form>
        <div class="tips column q-pt-md q-pr-lg q-pl-xl">
          <div>备注：1. 需输入单位全称进行精准查询；</div>
          <!-- <div style="padding-left: 3em;">2. 查询仅对注册用户开放，请登陆后查询；</div> -->
        </div>
        <div class="entries q-mt-md cursor-pointer">
          <q-img
            src="images/portal/加入标委会.png"
            @click="$router.push('/uc/committee')">
            <div class="full-height full-width text-center
              bg-transparent row justify-center items-center text-bold">
              <div style="font-size: 1.2rem;">{{$t('申请加入')}}</div>
              <q-icon name="fas fa-angle-double-right" size="sm"></q-icon>
            </div>
          </q-img>
          <q-img
            class="q-mt-lg q-mb-lg"
            src="images/portal/变更标委会.png"
            @click="$router.push('/uc/committee')">
            <div class="full-height full-width text-center
              bg-transparent row justify-center items-center text-bold">
              <div style="font-size: 1.2rem;">{{$t('会员变更')}}</div>
              <q-icon name="fas fa-angle-double-right" size="sm"></q-icon>
            </div>
          </q-img>
        </div>
      </div>
    </div>

    <q-separator></q-separator>
    <input-field
      :Field="{
        Type: 'Category',
        Label: 'SC42标准工作组',
      }"
      ></input-field>

    <div class="wg-list row full-width q-pb-md">
      <input-field
        class="sc42-workgroup q-px-md"
        :class="{
          'active': idx === wgShowDetailsOf,
          inactive: idx !== wgShowDetailsOf,
        }"
        v-for="(wg, idx) in ((data.wgs?.length && data.wgs) || wgs || [])" :key="idx"
        :Field="{
          Type: 'CommitteeWorkgroup',
          Name: '.',
          ReadOnly: true,
        }"
        :showDetails="idx === wgShowDetailsOf"
        :values="wg"
        @update:showDetails="onWgShowDetailsChanged(idx, $event)"
        ></input-field>
    </div>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
import captcha from '../../components/captcha.vue';

import wgs from './sc42_wgs.json';

export default {
  name: 'PolicyList',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listLayout,
    captcha,
  },
  data() {
    return {
      companyName: '',
      captcha: '',
      captchaId: '',
      checkResult: null,
      wgShowDetailsOf: -1,
      wgs,
    };
  },
  watch: {
    companyName() {
      this.checkResult = null;
    },
  },
  methods: {
    changeCaptcha(cid) {
      this.captchaId = cid;
    },
    onSubmit() {
      if (!this.companyName) return;

      this.loading = true;

      this.postRequest('/sdcomm/check', {
        name: this.companyName,
        captcha: this.captcha,
        cid: this.captchaId,
      })
        .then((d) => {
          this.loading = false;
          if (d && d.msg === 'OK') {
            this.checkResult = d.data.result;

            const fields = [];
            if (d.data.result) {
              fields.push({
                Type: 'String',
                ReadOnly: true,
                Default: '贵单位已加入SC42成员',
                Info: {
                  Classes: 'check-pass',
                },
              });

              // if (d.data.pay) {
              //   fields.push({
              //     Type: 'String',
              //     ReadOnly: true,
              //     Default: '单位今年缴费状态: 已缴费',
              //     Info: {
              //       Classes: 'check-pass',
              //     },
              //   });
              // } else {
              //   fields.push({
              //     Type: 'String',
              //     ReadOnly: true,
              //     Default: '单位今年缴费状态: 未缴费',
              //     Info: {
              //       Classes: 'check-fail',
              //     },
              //   });
              // }
            } else {
              fields.push({
                Type: 'String',
                ReadOnly: true,
                Default: '贵单位还未加入SC42，请联系秘书处',
                Info: {
                  Classes: 'check-fail',
                },
              });
            }

            this.showNotifyDialog({
              content: this.$t('查询结果'),
              canCancel: false,
              size: {
                w: 460,
              },
              okText: this.$t('okButtonText'),
              cancelText: this.$t('cancelButtonText'),
              fields,
              fieldsClass: 'stdcomm-check-dialog input-field-list full-width',
            });
          }
        })
        .catch(() => {
        }).finally(() => {
          this.loading = false;

          this.$refs.captcha.refresh();

          this.$nextTick(() => {
            this.$refs.form.reset();
          });
        });
    },

    onReset() {
      this.checkResult = null;
      this.companyName = '';
      this.captcha = '';
      this.captchaId = '';
    },
    showNotifyDialog(options, func) {
      this.$MsgDialog({ type: '', ...options })
        .then(() => {
          if (func && typeof func === 'function') {
            func();
          }
        })
        .catch(() => { });
    },

    onWgShowDetailsChanged(idx, show) {
      if ((this.wgShowDetailsOf === idx) && !show) {
        this.wgShowDetailsOf = '';
        return;
      }

      if (show) {
        this.wgShowDetailsOf = idx;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 360px;
  margin-left: 40px;
  .title {
    padding-bottom: 18px;
    font-size: 18px;
    color: #666666;
    &::before {
      content: "";
      width: 6px !important;
      height: 27px !important;
      border: 3px solid #265fb3;
      margin-right: 14px;
    }
  }

  :deep(.q-btn) {
    border-radius: 5px;
  }

  .tips {
    white-space: pre-wrap;
    font-size: 12px;
    color: #666666;
  }

  .entries {
    margin-top: 20px;
    .q-img {
      width: 100%;
      height: 80px;
      border-radius: 4px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
  }
}

.sc42-workgroup {
  &.active {
    width: 100%;
  }

  &.inactive {
    width: 360px !important;
  }
}
</style>

<style lang="scss">
.stdcomm-check-dialog.input-field-list {
  .input-field-wrapper {
    &.check-pass {
      color: green;
    }

    &.check-fail {
      color: red;
    }
  }
  .simple-field {
    text-align: center;
  }

}
</style>
